.handle {
  flex: 0 0 1.5em;
  position: relative;
  outline: none;
  --background-color: #efefef;
}
.handle:hover {
  --background-color: #dbdbdb;
}
.handle[data-resize-handle-active] {
  --background-color: #f5f5f5;
}

.handle > div {
  position: absolute;
  top: 0.25em;
  bottom: 0.25em;
  left: 0.25em;
  right: 0.25em;
  background-color: var(--background-color);
  border: 1px solid #0000000f;
  border-radius: 4px;
  transition: background-color 0.2s linear;
}

.handle[data-panel-group-direction='horizontal'] > div {
  top: 0;
  bottom: 0;
}

.handle[data-panel-group-direction='vertical'] > div {
  left: 0;
  right: 0;
}

.handle svg {
  width: 1em;
  height: 1em;
  position: absolute;
  left: calc(50% - 0.5rem);
  top: calc(50% - 0.5rem);
}

.handle[data-panel-group-direction='horizontal'] svg {
  transform: rotate(90deg);
}
